import React, { forwardRef } from 'react';
import { createElement } from 'react';
import './index.scss';

export interface DataStatsProps {
  width?: string | number;
  height?: string | number;
  backgroundImage?: string;
  mainValue?: {
    text?: string;
    unit?: string;
    fontSize?: number;
    color?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    letterSpacing?: string;
    lineHeight?: string;
    gradient?: {
      enabled?: boolean;
      colors?: string[];
      direction?: string;
    };
  };
  unitConfig?: {
    text?: string;
    fontSize?: number;
    color?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    letterSpacing?: string;
    lineHeight?: string;
  };
  title?: {
    text?: string;
    fontSize?: number;
    color?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    letterSpacing?: string;
    lineHeight?: string;
  };
  bottomPanel?: {
    backgroundImage?: string;
    leftText?: {
      text?: string;
      fontSize?: number;
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
    };
    rightText?: {
      text?: string;
      rankNumber?: string;
      fontSize?: number;
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
    };
  };
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const DataStats = forwardRef<HTMLDivElement, DataStatsProps>(function DataStats({
  width = 460,  // 调整为包含整个底部面板的宽度
  height = 186, // 调整为包含底部面板的总高度 (140 + 46 = 186)
  backgroundImage = 'http://localhost:8085/static/images/shouye/sjzb.png',
  mainValue = {
    text: '35.19',
    unit: '万',
    fontSize: 28,
    color: '#1AD7FF',
    fontFamily: 'DINAlternate',
    fontWeight: 'bold',
    letterSpacing: '1px',
    lineHeight: '28px',
    gradient: {
      enabled: true,
      colors: ['#FFFFFF', '#81C6FF'],
      direction: '90deg'
    }
  },
  unitConfig = {
    text: '万',
    fontSize: 16,
    color: 'rgba(255,255,255,0.8)',
    fontFamily: 'SourceHanSansSC',
    fontWeight: 500,
    letterSpacing: '0.57px',
    lineHeight: '24px'
  },
  title = {
    text: '铁路到发今日预测客流',
    fontSize: 16,
    color: '#FFFFFF',
    fontFamily: 'SourceHanSansSC',
    fontWeight: 500,
    letterSpacing: '0.57px',
    lineHeight: '24px'
  },
  bottomPanel = {
    backgroundImage: 'http://localhost:8085/static/images/shouye/bj51.png',
    leftText: {
      text: '今日预测客流处于历史',
      fontSize: 16,
      color: 'rgba(255,255,255,0.9)',
      fontFamily: 'SourceHanSansSC',
      fontWeight: 400,
      letterSpacing: '0.57px',
      lineHeight: '24px'
    },
    rightText: {
      text: '第',
      rankNumber: '1148',
      fontSize: 16,
      color: 'rgba(255,255,255,0.9)',
      fontFamily: 'SourceHanSansSC',
      fontWeight: 500,
      letterSpacing: '0.57px',
      lineHeight: '24px'
    }
  },
  theme = 'dark',
  style = {},
  className = '',
  onClick,
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) {
  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    '--background-image': backgroundImage ? `url(${backgroundImage})` : 'none',
    ...style
  } as React.CSSProperties & { '--background-image': string };

  const mainValueStyle: React.CSSProperties = {
    fontSize: `${mainValue.fontSize}px`,
    color: mainValue.color,
    fontFamily: mainValue.fontFamily,
    fontWeight: mainValue.fontWeight,
    letterSpacing: mainValue.letterSpacing,
    lineHeight: mainValue.lineHeight,
    background: mainValue.gradient?.enabled 
      ? `linear-gradient(${mainValue.gradient.direction}, ${mainValue.gradient.colors?.join(', ')})`
      : undefined,
    WebkitBackgroundClip: mainValue.gradient?.enabled ? 'text' : undefined,
    WebkitTextFillColor: mainValue.gradient?.enabled ? 'transparent' : undefined,
    backgroundClip: mainValue.gradient?.enabled ? 'text' : undefined
  };

  const unitStyle: React.CSSProperties = {
    fontSize: `${unitConfig.fontSize}px`,
    color: unitConfig.color,
    fontFamily: unitConfig.fontFamily,
    fontWeight: unitConfig.fontWeight,
    letterSpacing: unitConfig.letterSpacing,
    lineHeight: unitConfig.lineHeight
  };

  const titleStyle: React.CSSProperties = {
    fontSize: `${title.fontSize}px`,
    color: title.color,
    fontFamily: title.fontFamily,
    fontWeight: title.fontWeight,
    letterSpacing: title.letterSpacing,
    lineHeight: title.lineHeight
  };

  const bottomPanelStyle: React.CSSProperties = {
    backgroundImage: bottomPanel.backgroundImage ? `url(${bottomPanel.backgroundImage})` : undefined
  };

  const leftTextStyle: React.CSSProperties = {
    fontSize: `${bottomPanel.leftText?.fontSize}px`,
    color: bottomPanel.leftText?.color,
    fontFamily: bottomPanel.leftText?.fontFamily,
    fontWeight: bottomPanel.leftText?.fontWeight,
    letterSpacing: bottomPanel.leftText?.letterSpacing,
    lineHeight: bottomPanel.leftText?.lineHeight
  };

  const rightTextStyle: React.CSSProperties = {
    fontSize: `${bottomPanel.rightText?.fontSize}px`,
    color: bottomPanel.rightText?.color,
    fontFamily: bottomPanel.rightText?.fontFamily,
    fontWeight: bottomPanel.rightText?.fontWeight,
    letterSpacing: bottomPanel.rightText?.letterSpacing,
    lineHeight: bottomPanel.rightText?.lineHeight
  };

  return createElement('div', {
    ref,
    className: `data-stats ${theme} ${className}`.trim(),
    style: componentStyle,
    onClick,
    'data-component-id': componentId,
    'data-component-name': _componentName,
    'data-design-mode': __designMode,
    ...otherProps
  }, [
    // 主要数据区域
    createElement('div', {
      key: 'main-data',
      className: 'main-data-area'
    }, [
      createElement('div', {
        key: 'value-container',
        className: 'value-container'
      }, [
        createElement('span', {
          key: 'main-value',
          className: 'main-value',
          style: mainValueStyle
        }, mainValue.text),
        createElement('span', {
          key: 'unit',
          className: 'unit',
          style: unitStyle
        }, unitConfig.text)
      ]),
      createElement('div', {
        key: 'title',
        className: 'data-title',
        style: titleStyle
      }, title.text)
    ]),

    // 底部面板
    createElement('div', {
      key: 'bottom-panel',
      className: 'bottom-panel',
      style: bottomPanelStyle
    }, [
      createElement('span', {
        key: 'left-text',
        className: 'left-text',
        style: leftTextStyle
      }, bottomPanel.leftText?.text),
      createElement('span', {
        key: 'right-text',
        className: 'right-text',
        style: rightTextStyle
      }, `${bottomPanel.rightText?.text} ${bottomPanel.rightText?.rankNumber} 位`)
    ])
  ]);
});

DataStats.displayName = 'DataStats';

export default DataStats; 